<template>
  <div class="list-component">
		<el-form class="search-bar" :inline="true" :model="filter" >
		  <el-form-item label="场所名称">
			<el-input v-model="filter.name" placeholder="请输入场所名称"></el-input>
		  </el-form-item>
		  <el-form-item>
			<el-button type="primary" size="small" @click="getAreaList">查询</el-button>
		  </el-form-item>
		</el-form>
      <div class="list">
        <div class="button-bar">
          <el-button class="btn" type="primary" size="mini" icon="el-icon-plus"  @click="onAddArea" >新建</el-button>
          <el-button class="btn" type="warning" size="mini" icon="el-icon-edit" @click="onEditArea" >编辑</el-button>
          <el-button class="btn" type="danger" size="mini" icon="el-icon-delete" @click="onDeleteArea" >删除</el-button>
		  <el-button class="btn" type="primary" size="mini" icon="el-icon-view" title="生成为pdf"  @click="exportToPdf" >导出</el-button>
        </div>
        <div class="data">
          <el-table :data="areaList.data" stripe ref="areaList" @select-all="onSelectAll" @select="onSelect" v-height="'auto'" >
            <el-table-column type="selection"  align="center" width="50"></el-table-column>
            <el-table-column type="index" label="序号" prop="index" align="center" width="60px"></el-table-column>
            <el-table-column label="场所名称" prop="name" align="center" width></el-table-column>
            <el-table-column label="场所类型" prop="placeType" align="center" width></el-table-column>
            <el-table-column label="责任人" prop="responsible" align="center" width></el-table-column>
			<el-table-column label="创建时间" prop="createTime" align="center" width></el-table-column>
            <el-table-column label="操作" prop="opt" align="center" width="150">
              <slot slot-scope="scope">
                <el-button size="mini" @click="showDetails(scope)">查看</el-button>
              </slot>
            </el-table-column>
          </el-table>
        </div>
      </div>
    <el-dialog :title="optType" :visible.sync="showDialog">
      <component v-bind:is="curComponent" @closeDialog="closeDialog" :initData="initData"  @refresh="refresh"></component>
    </el-dialog>
  </div>
</template>
<script>
import editArea from "./area-edit.vue";
import areaDetails from "./area-details";
export default {
	props:{
		placeTypeList:[Array]
	},
  components: { editArea, areaDetails },
  data() {
    return {
      treeData:[],
      areaList: {
        pageNum: 1, //页码
        pageSize:25,
        total: 5, //总共条数
        data: []
      },
      filter: {
        name: ""
      },
      checked:[],//选择的列表
      optType: "编辑场所", //新增区划/编辑区划/导入/导出
      showDialog: false,
      curComponent: "editArea", //areaDetails，editArea/导入/到处...
      initData:{},
    };
  },
  watch:{
    areaList:{
      handler(val){

      },deep:true
    },
    showDialog(val){
      if(!val){
		  this.initData=null
        this.checked=[]
        this.$refs.areaList.clearSelection();
      }
    }
  },
  methods: {
    getAreaList(node) {
      if(this.$refs.areaList){
          this.checked=[];
          this.$refs.areaList.clearSelection();
      }
      var submitData = {
         ...this.filter,

      };
      this.$http.getAreaList(submitData)
        .then(res => {
          var data = res.data.data ||[];
		  this.areaList.data=data
        }).catch(err => {
            throw(err)
        });
    },

   

    refresh(){
      this.getAreaList()
    },

    //添加场所
    onAddArea() {
      this.$refs.areaList.clearSelection();
      this.optType = "新增场所";
      this.showDialog = true;
      this.curComponent=editArea
      this.$nextTick(()=>{
        this.checked = [];
        this.initData=this.checked[0]
      })
    },

    //编辑场所
    onEditArea(index, row) {
      if (this.checked.length > 1) {
        this.$message.warning("只能选中一个");
        return;
      } else if (this.checked.length === 0) {
        this.$message.warning("请选中要编辑的场所");
        return;
      }

      this.curComponent=editArea
      this.optType = "编辑场所";
      this.showDialog = true;
      this.$nextTick(()=>{
        this.initData=this.checked[0]
      })
    },

    //删除场所
    onDeleteArea(index, row) {
      if(this.checked.length===0){
        this.$message.warning("请选择要删除的场所!")
        return
      }
      let ids = this.checked.map(item => {
        return item.id;
      });
	  
	  this.$confirm('请确认是否删除?', '警告', {
	     confirmButtonText: '确定',
	     cancelButtonText: '取消',
	     type: 'warning'
	   }).then(() => {
			var submitData={id:ids.join()}
		  submitData.moduleName="场所管理"
		  this.$http.deleteArea(submitData)
		  .then(res => {
			  this.$message.success("删除成功!")
			  this.getAreaList(); //重新加载列表
		  }).catch(err => {
			throw ("deleteArea接口报错：", err);
		  });
	   })
    },


    //全选
    onSelectAll(selection) {
      this.checked = selection;
    },
    //选择
    onSelect(selection, row) {
      this.checked = selection;
    },
    
    closeDialog(bool) {
      this.showDialog = bool;
    },
    
    //查看详情
    showDetails(rowData){
      this.curComponent=areaDetails
      this.optType = "查看详情";
      this.showDialog = true;
      this.$nextTick(()=>{
        this.initData=rowData.row
      })
    },
	
	exportToPdf(){
		if(this.checked.length===0){
		  this.$message.warning("请选择要导出的场所!")
		  return
		}else if(this.checked.length>6){
			this.$message.warning("最多不超过6个!")
			return
		}
		let ids = this.checked.map(item => {
		  return item.id;
		});
		
		var submitData={ids:ids.join()}
		this.$http.exportArea(submitData)
		.then(res => {
			var url=res.data.data ||"";
			if(url){
				window.open(url,"_blank")
			}else{
				this.$message.error("生成pdf异常!")
			}
			  
		}).catch(err => {
			throw (err);
		});
	}
  },
  created() {
    this.getAreaList();
  }
};
</script>
